<template>
	<view class="pages">
		<u--form labelPosition="top" ref="form1" :model="form" :rules='rules'>
			<u-form-item prop="username" borderBottom :required="true">
				<view class="input_group">
					<view class="input_box">
						<view class="label">用户名</view>
						<u--input v-model="form.username" placeholder="请输入用户名"></u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="password" borderBottom :required="true">
				<view class="input_group">
					<view class="input_box">
						<view class="label">密码</view>
						<u--input v-model="form.password" :password="true" placeholder="密码"></u--input>
					</view>
				</view>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="登录" customStyle="margin-top: 30rpx" color="#503092"
			@click="submitForm"></u-button>
	</view>
</template>

<script>
	import {
		login
	} from '@/common/api.js'
	export default {
		data() {
			return {
				form: {
					id: 0,
					username: "",
					password: "",
					licensePlate: '',
					nickname: ''
				},
				submit: {
					loading: false,
					disabled: true
				},
				rules: {
					'username': [{
							type: 'string',
							required: true,
							message: '不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 1,
							max: 10,
							message: '位数1-10',
							trigger: ['blur', 'change']
						}
					],
					'password': [{
							type: 'string',
							required: true,
							message: '不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 1,
							max: 10,
							message: '位数1-10',
							trigger: ['blur', 'change']
						}

					]
				}
			}
		},
		methods: {
			//登录
			submitForm() {
				this.$refs.form1.validate().then(res => {
					console.log(res)
					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		min-height: calc(100vh - 44px);
		background-image: url('/static/beijing.jpg') !important;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		// align-items: center;
		padding: 42rpx;
		box-sizing: border-box;
		text-align: center;
		background: #fff;

		::v-deep .u-input__content__field-wrapper__field {
			height: 88rpx;
		}

		::v-deep .u-input {
			padding: 0 18rpx !important;
			color: #fff;
			background-color: transparent !important;
		}
		::v-deep.uni-input-placeholder{
			color: #fff !important;
		}

		::v-deep .u-line {
			display: none;
		}

		::v-deep .u-form-item__body__left__content__required {
			left: 0rpx;
			top: 45rpx;
			font-size: 56rpx;
			color: #B91212;
		}

		.input_box {
			border: 1px solid rgba(187, 187, 187, 1);
			border-radius: 16rpx;
			height: 88rpx;
			flex: 1;
			margin-left: 36rpx;
		}

		.input_group {
			display: flex;
			align-items: center;
			padding-left: 36rpx;
			flex: 1;
			margin-bottom: 20rpx;

			.label {
				position: absolute;
				top: -50rpx;
				// left: 10rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 14rpx;
				box-sizing: border-box;
				background-color: #fff;
			}

			.input_box {
				position: relative;
				margin-left: 16rpx;
				border: 1px solid rgba(187, 187, 187, 1);

				::v-deep .uni-input-input {
					color: rgba(187, 187, 187, 1);
				}
			}
		}
	}

	::v-deep .u-form-item__body__right__message {
		padding-left: 60rpx;
		text-align: left;
		margin-bottom: 26rpx;
	}
</style>